:host {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: row-reverse;
    padding-top: 1px;

    .sidebar {
        position: relative;
        width: 250px;
        flex-shrink: 0;
        overflow: hidden;
        border-right: 1px solid var(--dui-line-sidebar);

        dui-splitter {
            right: 0;
        }

        &.with-animation {
            transition: width 0.3s ease-in-out;
        }

        &.hidden {
            width: 0 !important;
        }

        &.hidden .sidebar-container,
        &.with-animation .sidebar-container {
            max-width: unset;
        }
    }

    .sidebar-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        position: relative;

        //we force to disable grow beyond what's allowed. min-width is important as well.
        min-width: 1px;
        max-width: 100%;

        text-overflow: ellipsis;
    }

    .content {
        flex: 1;
        position: relative;
        padding: 14px;

        //we force to disable grow beyond what's allowed. min-width is important as well.
        min-width: 1px;
        max-width: 100%;

        max-height: 100%;
        overflow: auto;
    }

    &:not(.transparent) .content {
        background-color: var(--dui-window-content-bg);
    }
}

.top-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--dui-line-sidebar);
}

:host.no-vibrancy {
    .sidebar {
        border-right: 1px solid #c7ced3;
        background-color: #dfe6eb;
    }
}

:host-context(.dui-theme-dark) {
    &.no-vibrancy {
        .sidebar {
            background-color: #2a3136;
        }
    }
}
